<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>carousel</title>
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>

<body>
  <style media="screen">
    .container {
      width: 210px;
      height: 140px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #ccc;
      perspective: 1100px;
      top: 50%;
      left: 50%;
      margin: 200px 0 0 -105px;
    
    }
    body{
      background-color: #8656fa;
    }


    @keyframes scroll {
      0% {
        transform: translateZ( -288px)  rotateY(0deg);
      }
      100% {
        transform: translateZ( -288px) rotateY(360deg);
      }
    }

    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      transform: translateZ( -288px);
      transform-style: preserve-3d;
      transition: transform 1s;
      animation: scroll 8s infinite;
    }

    #carousel figure {
      display: block;
      position: absolute;
      width: 186px;
      height: 116px;
      left: 10px;
      top: 10px;
      border: 2px solid black;
      line-height: 116px;
      font-size: 80px;
      font-weight: bold;
      color: white;
      text-align: center;
      margin: 0;
    }

    #carousel figure:nth-child(1) {
      background: hsla( 0, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(2) {
      background: hsla( 40, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(3) {
      background: hsla( 80, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(4) {
      background: hsla( 120, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(5) {
      background: hsla( 160, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(6) {
      background: hsla( 200, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(7) {
      background: hsla( 240, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(8) {
      background: hsla( 280, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(9) {
      background: hsla( 320, 100%, 50%, 0.8);
    }

    #carousel figure:nth-child(1) {
      transform: rotateY( 0deg) translateZ( 288px);
    }

    #carousel figure:nth-child(2) {
      transform: rotateY( 40deg) translateZ( 288px);
    }

    #carousel figure:nth-child(3) {
      transform: rotateY( 80deg) translateZ( 288px);
    }

    #carousel figure:nth-child(4) {
      transform: rotateY( 120deg) translateZ( 288px);
    }

    #carousel figure:nth-child(5) {
      transform: rotateY( 160deg) translateZ( 288px);
    }

    #carousel figure:nth-child(6) {
      transform: rotateY( 200deg) translateZ( 288px);
    }

    #carousel figure:nth-child(7) {
      transform: rotateY( 240deg) translateZ( 288px);
    }

    #carousel figure:nth-child(8) {
      transform: rotateY( 280deg) translateZ( 288px);
    }

    #carousel figure:nth-child(9) {
      transform: rotateY( 320deg) translateZ( 288px);
    }
  </style>

  </head>

  <body>


    <section class="container">
      <div id="carousel">
        <figure>1</figure>
        <figure>2</figure>
        <figure>3</figure>
        <figure>4</figure>
        <figure>5</figure>
        <figure>6</figure>
        <figure>7</figure>
        <figure>8</figure>
        <figure>9</figure>
      </div>
    </section>

  </body>

</html>
